<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Teste MXTag</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../jquery.js"></script>
    <script type="text/javascript" src="../../jquery.json.js"></script>
    <script type="text/javascript" src="../jquery.mxtag.js"></script>
    <script type="text/javascript" src="../modules/mxtag.collection.js"></script>
    <script type="text/javascript" src="../modules/mxtag.combobox.js"></script>
    <script type="text/javascript" src="../modules/mxtag.listbox.js"></script>
    <script type="text/javascript" src="../modules/mxtag.datagrid.js"></script>
    <script type="text/javascript" src="../modules/mxtag.datagridcolumn.js"></script>
    <style type="text/css">
        table.display * {
            font-family:Verdana;
            font-size:12px;
        }
        table.display th {
            border-bottom:1px solid #ABABAB;
            border-right:1px solid #ABABAB;
            border-top:1px solid #ABABAB;
            font-size:14px;
            padding:2px;
            background-color:#747E80;
            color:#F7F3E8;
        }
        table.display td {
            padding:0.5em;
            border-bottom:1px solid #ABABAB;
            border-right:1px solid #ABABAB;
        }
        table.display th.dataGridFirstTh {
            border-left:1px solid #ABABAB
        }
        table.display td.dataGridFirstTd {
            border-left:1px solid #ABABAB
        }

        table.display tr.odd {
            background-color:#D5E1DD;
        }

        table.display tr.even {
            background-color:#F7F3E8;
        }

        table.display tr.dataGridItemSelected {
            background-color:#77BED2;
        }

        table.display tr, table.display td {
            cursor:default;
        }
    </style>
  </head>
  <body>

      <div id="container_componentes">
          <fieldset>
              <legend>Modelo de ListBox</legend>
              <p>Clique duas vezes para deletar o item</p>
              <ListBox labelFunction="listLabelFunction" dataField="Example_name" id="lstExample" width="300" height="100"></ListBox>
              <p>
                <button onclick="alert($.jSONToString(lstExample.selectedItem()).replace(/,/g,',\n'));">Pegar Items</button>
              </p>
          </fieldset>

          <fieldset>
              <legend>Modelo de ComboBox</legend>
              <ComboBox dataField="Example_name" id="cboExample" width="300"></ComboBox>
              <p>
                <button onclick="alert($.jSONToString(cboExample.selectedItem()).replace(/,/g,',\n'));">Pegar Items</button>
              </p>
          </fieldset>

          <fieldset>
              <legend>Modelo de DataGrid</legend>
              <p>Clique duas vezes para deletar o item</p>
              <DataGrid id="grdExample" width="500">
                  <DataGridColumn dataField="Example_id" headerText="ID" width="100" ></DataGridColumn>
                  <DataGridColumn labelFunction="gridLabelFunction" dataField="Example_name" headerText="NAME" width="400"></DataGridColumn>
              </DataGrid>
              <p>
                <button onclick="alert($.jSONToString(grdExample.selectedItem()).replace(/,/g,',\n'));">Pegar Items</button>
              </p>
          </fieldset>
      </div>

      <script type="text/javascript">

          function listLabelFunction(item) {
              return ("0000"+ item['Example_id']).substr(-4) + " - " + item['Example_name'];
          }

          function gridLabelFunction(item, coluna) {
              return "<strong>"+item[coluna.dataField]+"</strong>";
          }

          $("#grdExample, #cboExample, #lstExample").mxtags();
          
          var dataProviderList = [{
            Example_id : 0,
            Example_name : "- Select -"
          },{
            Example_id : 1,
            Example_name : "Rafael Lúcio"
          },{
            Example_id : 2,
            Example_name : "Pedro Alvares"
          }];

          var dataProviderCombo = [{
            Example_id : 0,
            Example_name : "- Select -"
          },{
            Example_id : 1,
            Example_name : "Rafael Lúcio"
          },{
            Example_id : 2,
            Example_name : "Pedro Alvares"
          }];

          var dataProviderGrid = [{
            Example_id : 1,
            Example_name : "Rafael Lúcio"
          },{
            Example_id : 2,
            Example_name : "Pedro Alvares"
          }];

          function dblClickHandler(event, data) {
                lstExample.dataProvider.splice(lstExample.selectedIndex(), 1);
          }
          function gridDblClickHandler(event,data) {

                grdExample.dataProvider.splice(grdExample.selectedIndex(), 1);
              
          }
            lstExample.setDataProvider(
                new Collection(dataProviderList)
            );

            lstExample.bind(ListBoxEvent.DOUBLE_CLICK, dblClickHandler);

            cboExample.setDataProvider(
                new Collection(dataProviderCombo)
            );

            grdExample.setDataProvider(
                new Collection(dataProviderGrid)
            );

            grdExample.bind(DataGridEvent.ROW_DBLCLICK, gridDblClickHandler);

            lstExample.dataProvider.push({
               Example_id : 3,
               Example_name : "Teste"
            });

            cboExample.dataProvider.push({
               Example_id : 3,
               Example_name : "Teste 2"
            });

            grdExample.dataProvider.push({
               Example_id : 3,
               Example_name : "Teste 2"
            });

            lstExample.dataProvider.shift();

      </script>

  </body>
</html>
